<template>
  <div class="new-device">
    <h1>编辑设备信息</h1>
    <el-divider></el-divider>
    <el-form
      :model="deviceData"
      label-width="150px"
      ref="deviceForm"
      class="device-form"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="设备分类"
            prop="group"
            :rules="[
              { required: true, message: '请输入设备分类', trigger: 'blur' },
            ]"
          >
            <el-input v-model="deviceData.group" placeholder="请输入设备分类" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="设备名称"
            prop="name"
            :rules="[
              { required: true, message: '请输入设备名称', trigger: 'blur' },
            ]"
          >
            <el-input v-model="deviceData.name" placeholder="请输入设备名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="设备编号"
            prop="deviceNum"
            :rules="[
              { required: true, message: '请输入设备编号', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="deviceData.deviceNum"
              placeholder="请输入设备编号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌型号">
            <el-input v-model="deviceData.style" placeholder="请输入品牌型号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在区域">
            <el-input v-model="deviceData.area" placeholder="请输入所在区域" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备状态">
            <el-select v-model="deviceData.status" placeholder="请选择设备状态">
              <el-option label="正常" :value="1" />
              <el-option label="异常" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护人员">
            <el-input v-model="deviceData.fixer" placeholder="请输入维护人员" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="deviceData.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="saveDevice">保存</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "axios";

// 获取路由和路由实例
const route = useRoute();
const router = useRouter();

// 表单数据
const deviceData = reactive({
  id: null,
  group: "",
  name: "",
  deviceNum: "",
  style: "",
  area: "",
  status: null,
  fixer: "",
  remark: "",
});

// 表单引用
const deviceForm = ref(null);

// 获取设备详情
const fetchDeviceDetails = async (id) => {
  try {
    const response = await axios.get(
      `http://localhost:8080/publicDevice/${id}`,
      {
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }
    );
    if (response.data.code === 1) {
      Object.assign(deviceData, response.data.data);
    } else {
      console.error("查询设备详情失败:", response.data.msg);
    }
  } catch (error) {
    console.error("请求设备详情失败:", error);
  }
};

// 保存设备信息
const saveDevice = async () => {
  try {
    if (!deviceForm.value) return;

    await deviceForm.value.validate();
    const response = await axios.post(
      "http://localhost:8080/publicDevice/updataPublicDevice",
      {
        headers: {
          Authorization: localStorage.getItem("token"),
        },
        deviceData,
      }
    );
    if (response.data.code === 1) {
      console.log("设备信息保存成功");
      router.push("/backend/equipment/public"); // 返回设备列表页面
    } else {
      console.error("保存失败:", response.data.msg);
    }
  } catch (error) {
    console.error("保存设备信息失败:", error);
  }
};

// 取消编辑
const cancelEdit = () => {
  router.back(); // 返回上一页
};

// 获取路由参数并初始化数据
onMounted(() => {
  const { id } = route.query;
  if (id) {
    fetchDeviceDetails(id);
  } else {
    console.error("无效的设备ID");
  }
});
</script>

<style scoped>
.new-device {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

h1 {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.device-form {
  max-width: 800px;
  margin: 0 auto;
}

.el-divider {
  margin: 20px 0;
}
</style>
